import React, { useState } from 'react';
import { Box, Typography, Button, Card, CircularProgress, IconButton } from '@mui/material';
import {
    Edit as EditIcon,
    Add as AddIcon,
    ExpandMore as ExpandMoreIcon,
    ExpandLess as ExpandLessIcon,
    FileUpload as FileUploadIcon
} from '@mui/icons-material';
import PermissionGuard from '../../../components/PermissionGuard';

interface InfoSectionProps {
    title: React.ReactNode;
    children: React.ReactNode;
    onEdit?: () => void;
    onAdd?: () => void;
    onImport?: () => void;
    loading?: boolean;
}

const InfoSection: React.FC<InfoSectionProps> = ({ title, children, onEdit, onAdd, onImport, loading = false }) => {
    // 添加折叠状态
    const [expanded, setExpanded] = useState<boolean>(true);

    // 切换折叠状态的处理函数
    const handleToggleExpand = (e: React.MouseEvent) => {
        // 阻止事件冒泡，避免触发其他点击事件
        e.stopPropagation();
        setExpanded(!expanded);
    };

    return (
        <Card className="info-section" variant="outlined">
            <Box className="section-header" onClick={handleToggleExpand} sx={{ cursor: 'pointer' }}>
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    {expanded ? (
                        <ExpandLessIcon sx={{ color: '#fff', mr: 1 }} />
                    ) : (
                        <ExpandMoreIcon sx={{ color: '#fff', mr: 1 }} />
                    )}
                    {typeof title === 'string' ? <Typography className="section-title">{title}</Typography> : title}
                </Box>
                <Box
                    sx={{ display: 'flex', gap: 1 }}
                    onClick={(e) => e.stopPropagation()} // 阻止按钮点击事件冒泡到header
                >
                    {/* {onImport && (
                        <PermissionGuard requireEditFeatures>
                            <Button
                                variant="contained"
                                sx={{ color: '#fff' }}
                                color="primary"
                                startIcon={<FileUploadIcon />}
                                size="small"
                                onClick={onImport}>
                                导入
                            </Button>
                        </PermissionGuard>
                    )} */}
                    {onAdd && (
                        <PermissionGuard requireEditFeatures>
                            <Button
                                variant="contained"
                                sx={{ color: '#fff' }}
                                color="primary"
                                startIcon={<AddIcon />}
                                size="small"
                                onClick={onAdd}>
                                添加
                            </Button>
                        </PermissionGuard>
                    )}
                    {onEdit && (
                        <PermissionGuard requireEditFeatures requireEditBasicInfo={title === '基础信息'}>
                            <Button
                                variant="contained"
                                sx={{ color: '#fff' }}
                                size="small"
                                color="primary"
                                startIcon={<EditIcon />}
                                onClick={onEdit}>
                                编辑
                            </Button>
                        </PermissionGuard>
                    )}
                </Box>
            </Box>
            {expanded && (
                <Box className="section-content">
                    {loading ? (
                        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
                            <CircularProgress />
                        </Box>
                    ) : (
                        children
                    )}
                </Box>
            )}
        </Card>
    );
};

export default InfoSection;
